import React,{Component} from "react"
import store from './store'
import {inputChangeAction ,addListAction , delItemAction ,getListActionAxios} from './store/activeCreator'
import IndexUi from "./indexUi";
// import {connect} from 'react-redux'

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.inputChange = this.inputChange.bind(this)
        this.storeChange = this.storeChange.bind(this)
        this.addList = this.addList.bind(this)
        //订阅模式
        store.subscribe(this.storeChange)
    }
    componentDidMount(){
        const action = getListActionAxios()
        store.dispatch(action)
    }
    render() { 
        return ( 
            <IndexUi
                inputChange={this.inputChange}
                addList={this.addList}
                delItem={this.delItem}
                list={this.state.list}
                inputValue = {this.state.inputValue}
            />
        );
    }
    storeChange(){
        this.setState(store.getState())
    }
    inputChange(e){
        const action = inputChangeAction(e.target.value)
        store.dispatch(action)
    }
    addList(){
        const action = addListAction()
        store.dispatch(action)
    }
    delItem(index){
        const action = delItemAction(index)
        store.dispatch(action)
    }

}
export default Index;